<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环语句</title>
		<script src="../js/vue.min.js"></script>
	</head>
	<body>
		<!-- v-for 指令 -->
		<div id="app">
			<ol>
				<li v-for="site in sites">
					{{site.name}}
				</li>
			</ol>
			<ul>
				<template v-for="site in sites">
				  <li>{{ site.name }}</li>
				  <li>--------------</li>
				</template>
			</ul>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					sites:[
						{name:'Runoob'},
						{name:'Google'},
						{name:'Taobao'}
					]
				}
			})
		</script>
		<p>---------------------------------------------------------</p>
		<!-- v-for 迭代对象 -->
		<div id="app2">
		  <ul>
			<li v-for="value in object">
			{{ value }}
			</li>
			
			<!-- 第二个的参数为键名 -->
			<!-- <li v-for="(value, key) in object">
			{{ key }} : {{ value }}
			</li> -->
			
			<!-- 第三个参数为索引 -->
			<!-- <li v-for="(value, key, index) in object">
			 {{ index }}. {{ key }} : {{ value }}
			</li> -->
		  </ul>
		</div>
		<script>
		new Vue({
		  el: '#app2',
		  data: {
			object: {
			  name: '菜鸟教程',
			  url: 'http://www.runoob.com',
			  slogan: '学的不仅是技术，更是梦想！'
			}
		  }
		})
		</script>
		<p>--------------------------------------------------------------</p>
		<!-- v-for 迭代整数 -->
		<div id="app3">
			<ul>
				<li v-for="n in 10">
					{{ n }}
				</li>
			</ul>
		</div>
		<script>
			new Vue({
				el:'#app3'
			})
		</script>
	</body>
</html>
